<template>
	<div>
		<div class="operatBtnWrapper">
            <button class="operatBtn marR5" @click.stop="routerToAddUser">新建用户</button>
            <!-- <button class="operatBtn marR5" @click.stop="showUsers">显示用户</button> -->
            <!-- <button class="operatBtn marR5">导出用户权限</button> -->
            <el-select v-model="hideCol" @change="showCol" placeholder="请选择要显示的列" class="inputTxtWrapper marR5">
                <el-option
                v-for="(item,index) of hideCols"
                :key="Object.keys(hideCols[index])[0]"
                :label="item[Object.keys(hideCols[index])[0]]"
                :value="Object.keys(hideCols[index])[0]">
                </el-option>
            </el-select>
            <el-select v-model="selDepart" @change="showByDepart" placeholder="根据部门筛选" class="inputTxtWrapper">
                <el-option
                v-for="item of allDeparts"
                :key="item.id"
                :label="item.depart_name"
                :value="item.id">
                </el-option>
            </el-select>
            <!-- <div class="cusColumnWrapper">
                <ul class="choiceCol">
                    <li>工号</li>
                    <li>部门</li>
                    <li>职位</li>
                    <li>姓名</li>
                    <li>状态</li>
                    <li>技能</li>
                    <li>经验</li>
                    <li>性别</li>
                    <li>学历</li>
                    <li>生日</li>
                    <li>电话</li>
                    <li>邮箱</li>
                    <li>权限</li>
                </ul>
            </div> -->
		</div>
		<div class="tableWrapper marLR20">
            <el-row class="rowClass borderT1">
                <el-col :span="colObj.serialNum.totalVal" v-show="colObj.serialNum.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="序号">
                    序号
                    <div class="operTheaderIconWrapper">
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('serialNum','序号')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.staffNum.totalVal" class="posRelative" v-show="colObj.staffNum.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="工号">
                    工号
                    <div class="operTheaderIconWrapper">
                            <span class="tableCaretWrapper posL" v-if="tableShowUserList.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('staffnum')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('staffnum')"></i>
                            </span>
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('staffNum','工号')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.departs.totalVal" v-show="colObj.departs.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="部门">
                    部门
                     <div class="operTheaderIconWrapper">
                            <!-- <span class="tableCaretWrapper posL">
                                <i class="tableSortCaret tableAscending"></i>
                                <i class="tableSortCaret tableDescending"></i>
                            </span> -->
                            <icon name="closeCol" class="scaleIcon1 hideCol"  @click.native.stop="hideColumn('departs','部门')"></icon>
                    </div>
                   </div>
                </el-col>
                <el-col :span="colObj.posName.totalVal" v-show="colObj.posName.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="职位">
                    职位
                     <div class="operTheaderIconWrapper">
                            <span class="tableCaretWrapper posL" v-if="tableShowUserList.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('pos_name')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('pos_name')"></i>
                            </span>
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('posName','职位')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.name.totalVal" v-show="colObj.name.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="姓名">
                    姓名
                     <div class="operTheaderIconWrapper">
                            <span class="tableCaretWrapper posL" v-if="tableShowUserList.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('user_name')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('user_name')"></i>
                            </span>
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('name','姓名')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.state.totalVal" v-show="colObj.state.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="状态">
                    状态
                     <div class="operTheaderIconWrapper">
                            <span class="tableCaretWrapper posL" v-if="tableShowUserList.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('user_state')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('user_state')"></i>
                            </span>
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('state','状态')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.skill.totalVal" v-show="colObj.skill.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="技能">
                    技能
                     <div class="operTheaderIconWrapper">
                            <span class="tableCaretWrapper posL" v-if="tableShowUserList.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('skill_level')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('skill_level')"></i>
                            </span>
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('skill','技能')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.experience.totalVal" v-show="colObj.experience.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="经验">
                    经验
                     <div class="operTheaderIconWrapper">
                            <span class="tableCaretWrapper posL" v-if="tableShowUserList.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('experience_level')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('experience_level')"></i>
                            </span>
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('experience','经验')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.sex.totalVal" v-show="colObj.sex.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="性别">
                    性别
                     <div class="operTheaderIconWrapper">
                            <span class="tableCaretWrapper posL" v-if="tableShowUserList.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('user_sex')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('user_sex')"></i>
                            </span>
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('sex','性别')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.education.totalVal" v-show="colObj.education.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="学历">
                    学历
                     <div class="operTheaderIconWrapper">
                            <span class="tableCaretWrapper posL" v-if="tableShowUserList.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('education')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('education')"></i>
                            </span>
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('education','学历')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.birth.totalVal" v-show="colObj.birth.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="生日">
                    生日
                     <div class="operTheaderIconWrapper">
                            <span class="tableCaretWrapper posL" v-if="tableShowUserList.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('user_birth')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('user_birth')"></i>
                            </span>
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('birth',' 生日')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.tel.totalVal" v-show="colObj.tel.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="电话">
                    电话
                     <div class="operTheaderIconWrapper">
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('tel','电话')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.email.totalVal" v-show="colObj.email.isShow">
                  <div class="paddTB10 theader borderL1 ellipsis" title="邮箱">
                    邮箱
                     <div class="operTheaderIconWrapper">
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('email','邮箱')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.power.totalVal">
                  <div class="paddTB10 theader borderL1 ellipsis" title="权限" v-show="colObj.power.isShow">
                    权限
                     <div class="operTheaderIconWrapper">
                            <icon name="closeCol" class="scaleIcon1 hideCol" @click.native.stop="hideColumn('power','权限')"></icon>
                    </div>
                  </div>
                </el-col>
                <el-col :span="colObj.btnIcon.totalVal">
                  <div class="paddTB10 theader borderL1 borderR1 ellipsis" title="操作">
                    操作
                    <div class="operTheaderIconWrapper">
                            <icon name="closeCol" class="scaleIcon1 hideCol"></icon>
                    </div>
                  </div>
                </el-col>
            </el-row>

            <div v-for="(item,index) of tableShowUserList" :key="item.id" :index="index"> 
                <el-row class="rowClass">
                  <el-col :span="colObj.serialNum.totalVal" v-show="colObj.serialNum.isShow">
                    <p class="paddTB10 tContent borderL1">{{index}}</p>
                  </el-col>
                  <el-col :span="colObj.staffNum.totalVal" v-show="colObj.staffNum.isShow">
                    <p class="paddTB10 borderL1 tContent ellipsis">{{item.staffnum}}</p>
                  </el-col>
                  <el-col :span="colObj.departs.totalVal" v-show="colObj.departs.isShow">
                    <p class="paddTB10 borderL1 tContent ellipsis" :title="item.dNames">{{item.dNames}}</p>
                  </el-col>
                  <el-col :span="colObj.posName.totalVal" v-show="colObj.posName.isShow">
                    <p class="paddTB10 borderL1 tContent ellipsis" :title="item.pos_name">{{item.pos_name}}</p>
                  </el-col>
                  <el-col :span="colObj.name.totalVal" v-show="colObj.name.isShow">
                    <p class="paddTB10 borderL1 tContent ellipsis" :title="item.user_name">{{item.user_name}}</p>
                  </el-col>
                  <el-col :span="colObj.state.totalVal" v-show="colObj.state.isShow">
                      <p class="paddTB10 borderL1 tContent ellipsis" v-if="item.user_state === 1" title="在职">在职</p>
                        <p class="paddTB10 borderL1 tContent ellipsis" v-else-if="item.user_state === 2" title="离职">离职</p>
                        <p class="paddTB10 borderL1 tContent ellipsis" v-else-if="item.user_state === 3" title="实习">实习</p>
                        <p class="paddTB10 borderL1 tContent ellipsis" v-else-if="item.user_state === 4" title="休假">休假</p>
                  </el-col>
                  <el-col :span="colObj.skill.totalVal" v-show="colObj.skill.isShow">
                    <p class="paddTB10 borderL1 tContent">{{item.skill_level}}</p>
                  </el-col>
                  <el-col :span="colObj.experience.totalVal" v-show="colObj.experience.isShow">
                    <p class="paddTB10 borderL1 tContent">{{item.experience_level}}</p>
                  </el-col>
                  <el-col :span="colObj.sex.totalVal" v-show="colObj.sex.isShow">
                    <p class="paddTB10 borderL1 tContent">{{item.user_sex === 1 ? "男" : "女"}}</p>
                  </el-col>
                  <el-col :span="colObj.education.totalVal" v-show="colObj.education.isShow">
                    <p class="paddTB10 borderL1 tContent ellipsis" v-if="item.education === 1" title="初中">初中</p>
                    <p class="paddTB10 borderL1 tContent ellipsis" v-else-if="item.education === 2" title="高中">高中</p>
                    <p class="paddTB10 borderL1 tContent ellipsis" v-else-if="item.education === 3" title="大专">大专</p>
                    <p class="paddTB10 borderL1 tContent ellipsis" v-else-if="item.education === 4" title="本科">本科</p>
                    <p class="paddTB10 borderL1 tContent ellipsis" v-else-if="item.education === 5" title="硕士">硕士</p>
                    <p class="paddTB10 borderL1 tContent ellipsis" v-else-if="item.education === 6" title="博士">博士</p>
                  </el-col>
                  <el-col :span="colObj.birth.totalVal" v-show="colObj.birth.isShow">
                    <p class="paddTB10 borderL1 tContent ellipsis" :title="item.user_birth.split(' ')[0]">{{item.user_birth.split(' ')[0]}}</p>
                  </el-col>
                  <el-col :span="colObj.tel.totalVal" v-show="colObj.tel.isShow">
                    <p class="paddTB10 borderL1 tContent ellipsis" :title="item.user_tel">{{item.user_tel}}</p>
                  </el-col>
                  <el-col :span="colObj.email.totalVal" v-show="colObj.email.isShow">
                    <p class="paddTB10 borderL1 tContent ellipsis" :title="item.user_email">{{item.user_email}}</p>
                  </el-col>
                  <el-col :span="colObj.power.totalVal" v-show="colObj.power.isShow">
                    <p class="paddTB10 borderL1 tContent ellipsis" title="点击可查看用户权限">
                        <icon name="view" class="scaleIcon1" @click.native.stop=""></icon>
                    </p>
                  </el-col>
                  <el-col :span="colObj.btnIcon.totalVal">
                    <div class="paddTB10 borderL1 tContent borderR1">
                      <icon name="change" class="scaleIcon1 marR15" title="修改" @click.native.stop="routerToEditUser(item.id)"></icon>
                      <icon name="reset_pwd" class="scaleIcon1 marR15" title="清空密码并启用账号" @click.native.stop="clearPassword(item.id)"></icon>
                      <icon name="show" class="scaleIcon1" title="隐藏" @click.native.stop="hideUser(item.id,index)" v-if="item.is_user_hide === 1"></icon>
                      <icon name="showDisabled" class="scaleIcon1" title="显示" @click.native.stop="showUser(item.id,index)" v-else-if="item.is_user_hide === 2"></icon>
                    </div>
                  </el-col>
              </el-row>
            </div>
		</div>
        <div class="tipNoData" v-if="tableShowUserList.length <= 0">暂无部门数据</div> 

        <div class="pagiWrapper" v-if="tableShowUserList.length > 0">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="serverPage.currPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="serverPage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="serverPage.totalSize">
            </el-pagination>
        </div>

        <!-- <el-dialog
            :visible.sync="centerDialogVisible"
            width="400px"
            @closed="clearData"
            center>

            <div class="turnIconWrapper">
                <span class="turnLeftIcon turnCommIcon" @click.stop="turnPrevPage" >&lt;</span>
                <span  class="turnRightIcon turnCommIcon" @click.stop="turnNextPage">&gt;</span>
            </div>
            <div class="clearfix"></div>
            <div class="tableChoice">
                <div v-for="(item,index) of pageUsers" :index="index" :key="item.id" class="widPer20 hideDepart" @click.stop="selShowUser(item)" :class="{hideDepartActive:waitForShowUserIds.indexOf(item.id) > -1 }">
                {{item.user_name}}
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click.stop="updateUserShow">确 定</el-button>
            </span>
        </el-dialog> -->

    </div>

    

</template>

<script>
  import http from '@/assets/js/http'
  import _g from '@/assets/js/global'
    import { getPageData} from "@/assets/js/common.js"


  export default {
    data() {
      return {

        // 列数动态显示的初始值
        colObj:{
            serialNum:{                                                                 //  对应序号
                iniVal:1,                                                                   //  用于计算的比例，固定不变
                totalVal:1,                                                                //   计算后所得的宽度 
                isShow:true                                                             //  默认显示
            },
            staffNum:{                                                                 //  对应工号
                iniVal:1,
                totalVal:1,
                 isShow:true
            },
            departs:{                                                                 //  对应部门
                iniVal:3,
                totalVal:3,
                isShow:true
            },
            posName:{                                                                 //  对应职位
                iniVal:2,
                totalVal:2,
                 isShow:true
            },
            name:{                                                                 //  对应姓名
                iniVal:2,
                totalVal:2,
                 isShow:true
            },
            state:{                                                                 //  对应状态
                iniVal:1,
                totalVal:1,
                 isShow:true
            },
            skill:{                                                                 //  对应技能
                iniVal:1,
                totalVal:1,
                 isShow:true
            },
            experience:{                                                                 //  对应经验
                iniVal:1,
                totalVal:1,
                 isShow:true
            },
            sex:{                                                                 //  对应性别
                iniVal:1,
                totalVal:1,
                 isShow:true
            },
            education:{                                                                 //  对应学历
                iniVal:1,
                totalVal:1,
                 isShow:true
            },
            birth:{                                                                 //  对应生日
                iniVal:2,
                totalVal:2,
                 isShow:true
            },
            tel:{                                                                 //  对应电话
                iniVal:2,
                totalVal:2,
                isShow:true
            },
            email:{                                                                 //  对应邮箱
                iniVal:2,
                totalVal:2,
                 isShow:true
            },
            power:{                                                                 //  对应权限
                iniVal:1,
                totalVal:1,
                 isShow:true
            },
            btnIcon:{                                                                 //  对应操作
                iniVal:3,
                totalVal:3,
                isShow:true
            }
        },
          hideCol:'',                                                       //..隐藏的列变量
          hideCols:[],                                                                                  //  被隐藏的列
          tableShowUserList: [],                                                                          //  显示的用户
          serverPage:{                                                                                              //  后台分页                                    
                pageSize:10,                 //  每页显示10个
                totalSize:0,                 //  总记录数
                currPage:1,                    //  当前页码    
            },  
            // page:{                                                                                                      //  前台分页                    
            //     pageCount:10,                 //  每页显示10个
            //     totalPageCount:1,                 //  总页数
            //     currPageNum:1,                    //  当前页码    
            // },   
            currSort:{                              //  当前面排序类型,默认根据用户状态升序排列
                sortIdent:'user_state',         //..排序字段(与数据库保持一致)
                sortType:1,                         //  1升序，2降序    
            },
            allDeparts:[],                          //  所有部门
            selDepart:'all',                                                                    //  当前选择的部门id,默认为所有部门
                                       
                   

            // 下面为隐藏用户相关
            // centerDialogVisible:false,       //  默认隐藏显示隐藏用户的弹框
            // hideUsers:[],                         //  隐藏的所有人员
            // pageUsers:[],                           //  分页人员集合
            // waitForShowUserIdsStr:'',                //待显示的人员id集合字符串
            // waitForShowUserIds:[],                //待显示的人员id集合
            // waitForShowUsers:[],                //  带显示的人员

            // page:{                                        
            //     pageCount:10,                 //  每页显示20个
            //     totalPageCount:1,                 //  总页数
            //     currPageNum:1,                    //  当前页码    
            // },   
      }
    },
    methods: {
           /* 弹框初始化数据 */
    //   clearData(){
    //       this.pageUsers=[]                       //分页人员集合
    //       this.hideUsers=[]                       //  隐藏的所有人集合
    //       this.waitForShowUserIdsStr = ''                       //待显示的人员id集合字符串
    //     this.waitForShowUsers=[]          //  待显示的人员
    //     this.waitForShowUserIds=[]              //待显示的人员id集合
    //     this.page = {                                        
    //         pageCount:10,                 //  每页显示10个
    //         totalPageCount:1,                 //  总页数
    //         currPageNum:1                    //  当前页码    
    //     }
    //   },
        /* 显示隐藏用户 */
        // showUsers(){
        //     const that = this
            
        //     let hideUsers = []                      //  所有隐藏用户集合
        //     let pageUsers = [];                 //  分页隐藏用户集合       
        //     let totalPageCount = 1;           //  总页数

        //     let startIndex = 0;                 //  开始索引
        //     let endIndex = 9;              //  结束索引


        //     _g.showLoading('隐藏用户加载中');
        //     that.apiPost("admin/users/getAllHideUsers").then(res => {
        //         _g.showLoading().close()
        //         if(typeof res === 'string'){
        //                 res = JSON.parse(res)
        //             }
        //             if ((res.code || res.code === 0)  && res.code != 200) {
        //                 that.handleError(res)
        //             } else {
        //                 if(res.data.isSuccess === 0){
        //                     if(res.data.hideUserList.length === 0){
        //                         _g.toastMsg("warning", '暂无被隐藏的人员')
        //                     }else{                                                                  //  如果存在隐藏人员
        //                         that.centerDialogVisible = true                         //  显示弹框
        //                         totalPageCount = Math.ceil(res.data.hideUserList.length / that.page.pageCount)   //  总页数
        //                         hideUsers = res.data.hideUserList
        //                         that.page.totalPageCount = totalPageCount
        //                         that.hideUsers = hideUsers
        //                         if(totalPageCount === 1){                           //  如果只有1页
        //                             that.pageUsers = hideUsers
        //                         }else{                                                              //  取第1页数据
        //                             pageUsers = getPageData(startIndex,endIndex,hideUsers)
        //                             that.pageUsers = pageUsers
        //                         }
        //                     }
        //                 }
        //             }
        //     })
        // },

    // /* 选择需要显示的人员 */
    // selShowUser(currUser){
    //     const that = this
    //     let waitForShowUserIds = that.waitForShowUserIds        //  待显示的人员id集合
    //     let waitForShowUsers = that.waitForShowUsers    //  待显示的人员集合
    //     if(waitForShowUserIds.indexOf(currUser.id) > -1){       //  如果已经选择
    //         waitForShowUserIds = waitForShowUserIds.filter((id) => id !== currUser.id)
    //         waitForShowUsers = waitForShowUsers.filter((item) => item.id !== currUser.id)
    //     }else{
    //         waitForShowUserIds.push(currUser.id)
    //         waitForShowUsers.push(currUser)
    //     }
    //     that.waitForShowUserIds = waitForShowUserIds//  待显示的人员id集合
    //     that.waitForShowUsers = waitForShowUsers
    // },
    
        /* 上一页隐藏用户 */
    //   turnPrevPage(){
    //     let startIndex = null	                                        // 开始索引
    //     let endIndex = null                                           //    结束索引
    //     let currPageNum = this.page.currPageNum     //  当前页
    //      let totalPageCount = this.page.totalPageCount     //  总页数
    //     let pageCount = this.page.pageCount                                 //  每页显示人员个数
    //     let pageUsers = []                                        //  分页人员集合

    //       if(this.page.currPageNum === 1){
    //         _g.toastMsg("warning", '已经是第一页')
    //       }else{
    //           --currPageNum
    //         startIndex = (currPageNum - 1) * pageCount
    //         if(currPageNum < totalPageCount){
    //             endIndex = currPageNum * pageCount - 1
    //         }else{                                                                              //  如果下一页为最后一页
    //             endIndex = this.hideUsers.length - 1
    //         }  
    //         pageUsers = getPageData(startIndex,endIndex,this.hideUsers)
    //         this.page.currPageNum = currPageNum
    //         this.pageUsers = pageUsers
    //       }
    //   },

      /* 下一页隐藏用户 */
    //    turnNextPage(){
    //     let startIndex = null	                                        // 开始索引
    //     let endIndex = null                                           //    结束索引     
    //     let currPageNum = this.page.currPageNum     //  当前页
    //     let totalPageCount = this.page.totalPageCount     //  总页数
    //     let pageCount = this.page.pageCount                                 //  每页显示部门个数
    //     let pageUsers = []                                        //  分页部门集合

    //      if(currPageNum === totalPageCount ){
    //         _g.toastMsg("warning", '已经是最后一页')
    //       }else{
    //         ++currPageNum
    //         startIndex = (currPageNum - 1) * pageCount
    //         if(currPageNum < totalPageCount){
    //             endIndex = currPageNum * pageCount - 1
    //         }else{                                                                              //  如果下一页为最后一页
    //             endIndex = this.hideUsers.length - 1
    //         }  
    //         pageUsers = getPageData(startIndex,endIndex,this.hideUsers)
    //         this.page.currPageNum = currPageNum
    //         this.pageUsers = pageUsers
    //       }
    //    },

        /* 列升排序 */
        sortAsc(sortIdent){
            const that = this
            let data = {
                pageSize:that.serverPage.pageSize,
                currPage:that.serverPage.currPage,
                sortIdent,
                sortType:1,
                departId:that.selDepart
            }
            let tableShowUserList = []           //  显示的用户
            let departsStr = ''
            let url = ''

            // 记录排序类型
            that.currSort.sortIdent = sortIdent         
            that.currSort.sortType = 1         

            _g.showLoading('排序中')
                that.apiPost('admin/users/queryByDepartId', data).then((res) => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if ((res.code || res.code === 0)  && res.code != 200) {
                        that.handleError(res)
                    } else {
                        if(res.data.isSuccess === 0){
                            
                            tableShowUserList = res.data.userList.data
                           
                           if(tableShowUserList.length > 0){
                               _g.toastMsg("success", res.message)
                           }else{
                                _g.toastMsg("warning", '暂无数据')
                           }
                           that.tableShowUserList = tableShowUserList
                           that.serverPage.totalSize = res.data.userList.total

                            // for(let i = 0;i < tableShowUserList.length;i++){
                            //     departsStr = ''
                            //     for(let j = 0; j < tableShowUserList[i].departs.length;j++){
                                     
                            //         if(j === (tableShowUserList[i].departs.length - 1)){
                            //             departsStr += tableShowUserList[i].departs[j].depart_name
                            //         }else{
                            //              departsStr += tableShowUserList[i].departs[j].depart_name + ','   
                            //         }
                            //     }
                            //     tableShowUserList[i]['departsStr'] = departsStr
                            // }
                        }
                    }
            })
        },

        /* 列降排序 */
        sortDesc(sortIdent){
            const that = this
            let data = {
                pageSize:that.serverPage.pageSize,
                currPage:that.serverPage.currPage,
                sortIdent,
                sortType:2,
                departId:that.selDepart
            }
            let tableShowUserList = []           //  显示的用户
            let departsStr = ''

             // 记录排序类型
            that.currSort.sortIdent = sortIdent         
            that.currSort.sortType = 2  

            _g.showLoading('排序中')
                // that.apiPost('admin/users/sort', data).then((res) => {
                that.apiPost('admin/users/queryByDepartId', data).then((res) => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if ((res.code || res.code === 0)  && res.code != 200) {
                        that.handleError(res)
                    } else {
                        if(res.data.isSuccess === 0){
                            
                            tableShowUserList = res.data.userList.data
                            if(tableShowUserList.length > 0){
                                _g.toastMsg("success", res.message)
                            }else{
                                _g.toastMsg("warning", '暂无数据')
                            }
                             that.tableShowUserList = tableShowUserList
                            that.serverPage.totalSize = res.data.userList.total

                            // for(let i = 0;i < tableShowUserList.length;i++){
                            //     departsStr = ''
                            //     for(let j = 0; j < tableShowUserList[i].departs.length;j++){
                                     
                            //         if(j === (tableShowUserList[i].departs.length - 1)){
                            //             departsStr += tableShowUserList[i].departs[j].depart_name
                            //         }else{
                            //              departsStr += tableShowUserList[i].departs[j].depart_name + ','   
                            //         }
                            //     }
                            //     tableShowUserList[i]['departsStr'] = departsStr
                            // }
                        }
                    }
            })
        },

        /* 显示列 */
        showCol(){
            const that = this
            let hideCol = that.hideCol
           let colObj = that.colObj
           let hideCols = that.hideCols
           colObj[hideCol]['isShow'] = true
            that.colObj = colObj
            let currIndex = null
            let len = hideCols.length
            for(let i = 0;i < len;i++){
                if(Object.keys(hideCols[i])[0] === hideCol){
                    currIndex = i
                }
            }
            

            that.hideCols.splice(currIndex,1)
            that.calColWidth()
        },
        /* 隐藏列  */
       hideColumn(type,str){
           const that = this
           let colObj = that.colObj
           colObj[type]['isShow'] = false
            that.colObj = colObj
            let obj = {}
            obj[type] = str
            that.hideCols.push(obj)
            that.calColWidth()
       },

        /* 计算表格列的宽度 */
        calColWidth(){
            const that = this
            let colObj = that.colObj
            let keys = Object.keys(colObj)
            let tempShowColObj = {}
            let totalVal = null                                                     //  计算宽度变量
            let sum = 0
            let len = keys.length

            //    计算宽度比例
            for(let i = 0;i < len - 1;i++){
                if(colObj[keys[i]]['isShow']){                                              //..如果列为显示
                    totalVal = (24 *colObj[keys[i]]['iniVal']) / 24     
                    colObj[keys[i]]['totalVal'] =  totalVal           
                    sum += totalVal
                }
            }
            colObj[keys[len - 1]]['totalVal'] = 24 - sum

            that.colObj = colObj
        },

        /* 根据部门筛选用户 */
        showByDepart(){
            this.sortByCurrSort()
        },

        /* 清空密码并启用账号 */
        clearPassword(id){
            const that = this
            that.$confirm('是否确认清空密码?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                        _g.showLoading('提交中')
                        that.apiPost('admin/users/clearPassword', {id}).then((res) => {
                            _g.showLoading().close()
                            if(typeof res === 'string'){
                                res = JSON.parse(res)
                            }
                            if ((res.code || res.code === 0)  && res.code != 200) {
                                that.handleError(res)
                            } else {
                                if(res.data.isSuccess === 0){
                                    _g.toastMsg("success", res.message)
                                   that.getUserList()
                                }else if(res.data.isSuccess === 1){
                                    _g.toastMsg("error", res.message)
                                }
                            }
                    })
                }).catch(() => {})
        },

        /* 隐藏用户  */
        hideUser(id,index){
            const that = this
            that.$confirm('是否确认隐藏用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                        _g.showLoading('隐藏中')
                        that.apiPost('admin/users/hide', {id}).then((res) => {
                            _g.showLoading().close()
                            if(typeof res === 'string'){
                                res = JSON.parse(res)
                            }
                            if ((res.code || res.code === 0)  && res.code != 200) {
                                that.handleError(res)
                            } else {
                                if(res.data.isSuccess === 0){
                                    _g.toastMsg("success", res.message)
                                    that.tableShowUserList[index].is_user_hide = 2                                      //  隐藏标识
                                //    that.getUserList()
                                }else if(res.data.isSuccess === 1){
                                    _g.toastMsg("error", res.message)
                                }
                            }
                    })
                }).catch(() => {})
            },
        /* 显示用户  */
        showUser(id,index){
            const that = this
            that.$confirm('是否确认显示用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                        _g.showLoading('隐藏中')
                        that.apiPost('admin/users/show', {id}).then((res) => {
                            _g.showLoading().close()
                            if(typeof res === 'string'){
                                res = JSON.parse(res)
                            }
                            if ((res.code || res.code === 0)  && res.code != 200) {
                                that.handleError(res)
                            } else {
                                if(res.data.isSuccess === 0){
                                    _g.toastMsg("success", res.message)
                                    that.tableShowUserList[index].is_user_hide = 1                                      //  显示标识
                                //    that.getUserList()
                                }else if(res.data.isSuccess === 1){
                                    _g.toastMsg("error", res.message)
                                }
                            }
                    })
                }).catch(() => {})
            },

      /* 跳转到新增用户页面 */
      routerToAddUser(){
        this.$router.push('/admin/users/add')
      },

      /* 跳转到编辑用户页面 */
      routerToEditUser(id){
          this.$router.push({ name: 'usersAdd', params: { id }})
      },

    /* 更新人员为显示 */
    // updateUserShow(){
    //     const that = this
    //     let waitForShowUserIds = that.waitForShowUserIds        //  待显示的人员id集合
    //     let waitForShowUsers = that.waitForShowUsers    //  待显示的人员集合

    //     let ids = ''                                                          //..待显示的人员id集合字符串
    //     if(waitForShowUserIds.length <= 0){                                                        //  如果没有选择
    //         _g.toastMsg('warning','尚未选择要显示的人员')
    //         return
    //     }else{
    //          that.$confirm('是否确认显示人员?', '提示', {
    //               confirmButtonText: '确定',
    //               cancelButtonText: '取消',
    //               type: 'warning',
    //               center: true
    //           }).then(() => {
    //                ids = waitForShowUserIds.join(',')
    //                 _g.showLoading('提交中')
    //                 that.apiPost('admin/users/updateUsersHides', {ids}).then((res) => {
    //                     _g.showLoading().close()
    //                     if(typeof res === 'string'){
    //                         res = JSON.parse(res)
    //                     }
    //                     if (res.code != 200) {
    //                         that.handleError(res)
    //                     } else {
    //                     if(res.data.isSuccess === 0){             //  成功
    //                         _g.toastMsg("success", res.message)
    //                          // 一下是成功的条件下
    //                         that.centerDialogVisible = false                                                                    //  关闭弹窗

    //                         if(that.currSort.sortType === 1){                                          //  如果当前状态为升序，则升排序
    //                             that.sortAsc(that.currSort.sortIden)  
    //                         }else if(that.currSort.sortType === 2){                                    //  如果当前状态为降序，则降排序
    //                             that.sortDesc(that.currSort.sortIden) 
    //                         }
    //                     }else{
    //                         _g.toastMsg("error", res.message)
    //                     }
    //                     }
    //             })
    //           }).catch(() => {});
    //     }

    // },

      /* 根据当前排序类型进行排序 */
      sortByCurrSort(){
          const that = this
          const currSort = that.currSort
          if(currSort.sortType === 1){
              that.sortAsc(currSort.sortIdent)
          }else if(currSort.sortType === 2){
              that.sortDesc(currSort.sortIdent)
          }
      },  
      handleSizeChange(){
        //   this.getUserList()
        this.sortByCurrSort()
      },
      handleCurrentChange(){
         this.sortByCurrSort()
        //   this.getUserList()
      },
      /* 获取用户列表 */
      getUserList(departId){
            const that = this
            let tableShowUserList = []           //  用户  
            let departsStr = ''
            // const userId = Cookies.get('userId')
            let data = {
                // userId,
                pageSize : that.serverPage.pageSize,
                currPage : that.serverPage.currPage,
                departId:that.selDepart,
                sortIdent:'user_state',
                sortType:1
            }
            _g.showLoading('加载中');
            this.apiPost("admin/users/queryByDepartId",data).then(res => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                      res = JSON.parse(res)
                    }
                    if ((res.code || res.code === 0)  && res.code != 200) {
                      this.handleError(res)
                    } else {
                        console.log('res = ',res)
                        if(res.data.isSuccess === 0){                           //  

                            tableShowUserList = res.data.userList.data
                           
                           if(tableShowUserList.length > 0){
                               that.tableShowUserList = tableShowUserList
                                that.serverPage.totalSize = res.data.userList.total
                           }

                            // for(let i = 0;i < tableShowUserList.length;i++){
                            //     departsStr = ''
                            //     for(let j = 0; j < tableShowUserList[i].departs.length;j++){
                                     
                            //         if(j === (tableShowUserList[i].departs.length - 1)){
                            //             departsStr += tableShowUserList[i].departs[j].depart_name
                            //         }else{
                            //              departsStr += tableShowUserList[i].departs[j].depart_name + ','   
                            //         }
                            //     }
                            //     tableShowUserList[i]['departsStr'] = departsStr
                            // }
                        }
                    }
              })
      },
    //   /* 获取用户列表 */
    //   getUserList(departId){
    //         const that = this
    //         let tableShowUserList = []           //  用户  
    //         let departsStr = ''
    //         // const userId = Cookies.get('userId')
    //         let data = {
    //             // userId,
    //             pageSize : that.serverPage.pageSize,
    //             currPage : that.serverPage.currPage,
    //             departId:that.selDepart
    //         }
    //         _g.showLoading('加载中');
    //         this.apiPost("admin/users/index",data).then(res => {
    //                 _g.showLoading().close()
    //                 if(typeof res === 'string'){
    //                   res = JSON.parse(res)
    //                 }
    //                 if ((res.code || res.code === 0)  && res.code != 200) {
    //                   this.handleError(res)
    //                 } else {
    //                     if(res.data.isSuccess === 0){                           //  成功
    //                         tableShowUserList = res.data.userList
                           

    //                         for(let i = 0;i < tableShowUserList.length;i++){
    //                             departsStr = ''
    //                             for(let j = 0; j < tableShowUserList[i].departs.length;j++){
                                     
    //                                 if(j === (tableShowUserList[i].departs.length - 1)){
    //                                     departsStr += tableShowUserList[i].departs[j].depart_name
    //                                 }else{
    //                                      departsStr += tableShowUserList[i].departs[j].depart_name + ','   
    //                                 }
    //                             }
    //                             tableShowUserList[i]['departsStr'] = departsStr
    //                         }
    //                          that.tableShowUserList = tableShowUserList
    //                          that.serverPage.totalSize = res.data.total
    //                     }
    //                 }
    //           })
    //   },

      /* 获取部门列表 */
      getDepartList(){
            const that = this
            let allDeparts = []           //  所有部门    
            let selDepart =  {                                                                   //  默认选中所有部门
                depart_name:'所有部门',
                id:'all',
                is_show:'all',
                userLen:'all',
            }       
            // const userId = Cookies.get('userId')
            _g.showLoading('部门加载中');
            this.apiPost("admin/addDepart").then(res => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                      res = JSON.parse(res)
                    }
                    if (res.code != 200) {
                      this.handleError(res)
                    } else {
                        if(res.data.isSuccess === 100){
                            _g.toastMsg("error", res.message)
                            that.$router.push('/')
                        }
                        
                        allDeparts = res.data.departList

                        allDeparts.push(selDepart)
                        that.allDeparts = allDeparts
                    }
              })
      },
    },
    created() {
        this.getDepartList()
        this.getUserList()
    },
    computed: {
    },
    components: {
    },
    mixins: [http]
  }
</script>